$gradient-left-color-1: #4ecdc4;
$gradient-right-color-1: #c797eb;

$gradient-left-color-2: #bdc3c7;
$gradient-right-color-2: #2c3e50;

$gradient-left-color-3: #f8b500;
$gradient-right-color-3: #fceabb;

$gradient-left-color-4: #43cea2;
$gradient-right-color-4: #185a9d;

$gradient-left-color-5: #000428;
$gradient-right-color-5: #004e92;

$gradient-left-color-6: #f0ecfc;
$gradient-right-color-6: #c797eb;

$gradient-left-color-7: #c02425;
$gradient-right-color-7: #f0cb35;

$gradient-left-color-8: #7b4397;
$gradient-right-color-8: #dc2430;

$gradient-left-color-9: #833ab4;
$gradient-right-color-9: #fd1d1d;

$gradient-colors: (
  $gradient-left-color-1,
  $gradient-right-color-1,
  $gradient-left-color-2,
  $gradient-right-color-2,
  $gradient-left-color-3,
  $gradient-right-color-3,
  $gradient-left-color-4,
  $gradient-right-color-4,
  $gradient-left-color-5,
  $gradient-right-color-5,
  $gradient-left-color-6,
  $gradient-right-color-6,
  $gradient-left-color-7,
  $gradient-right-color-7,
  $gradient-left-color-8,
  $gradient-right-color-8,
  $gradient-left-color-9,
  $gradient-right-color-9
);

@mixin buttons-generator-gradient--common($left, $right) {
  min-width: 130px;
  height: 40px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  background-size: 120% auto;
  background-image: linear-gradient(315deg, $left 0%, $right 75%);
  &:hover {
    background-position: right center;
  }
  &:active {
    top: 2px;
  }
}

@for $i from 1 through 9 {
  .buttons-generator-gradient--#{$i} {
    @include buttons-generator-gradient--common(
      nth($gradient-colors, 2 * $i - 1),
      nth($gradient-colors, 2 * $i)
    );
  }
}